var participants_ = null;

function keyPressed(event) {
	var box = $("box");
	$("box").style.backgroundColor = "red";
	if(event.keyCode == Event.KEY_LEFT) {
		box.style.left = parseInt(Element.getStyle(box, "left")) - 10 + "px";
	} else if(event.keyCode == Event.KEY_RIGHT) {
		box.style.left = parseInt(Element.getStyle(box, "left")) + 10 + "px";
	} else if(event.keyCode == Event.KEY_DOWN) {
		box.style.top = parseInt(Element.getStyle(box, "top")) + 10 + "px";
	} else if(event.keyCode == Event.KEY_UP) {
		box.style.top = parseInt(Element.getStyle(box, "top")) - 10 + "px";
	}
}


/**
 * Syncs local copy of the participants list with that on the server and renders
 *     the app to reflect the changes.
 * @param {!Array.<gapi.hangout.Participant>} participants The new list of
 *     participants.
 */
function updateLocalParticipantsData(participants) {
  participants_ = participants;
}


// A function to be run at app initialization time which registers our callbacks
function init() {
  console.log('Init app.');

  var apiReady = function(eventObj) {
    if (eventObj.isApiReady) {
      console.log('API is ready');

/*
      gapi.hangout.data.onStateChanged.add(function(eventObj) {
        updateStateUi(eventObj.state);
      });
*/
		gapi.hangout.onParticipantsChanged.add(function(partChangeEvent) {
          updateLocalParticipantsData(partChangeEvent.participants);
        });
	

      gapi.hangout.onApiReady.remove(apiReady);
    }
  };

  // This application is pretty simple, but use this special api ready state
  // event if you would like to any more complex app setup.
  gapi.hangout.onApiReady.add(apiReady);  
  
  Event.observe(document, 'keydown', keyPressed);
  console.log('app done');
}

gadgets.util.registerOnLoadHandler(init);